<template>
  <div class="matchResult">
    <!-- 对阵信息 -->
    <div class="table">
      <a-table :columns="columns" :pagination="false" :data-source="data"></a-table>
    </div>
    <!-- 犯规和命中数据 -->
    <div class="foul-hit">
      <!-- 甲队犯规 -->
      <div class="matchResult-left">
        <div class="foul">
          <p>本届犯规</p>
          <p>10</p>
        </div>
        <div class="foul">
          <p>剩余暂停</p>
          <p>1</p>
        </div>
      </div>
      <!-- 命中信息 -->
      <div class="matchResult-middle">
        <div>
          <div class="hit-top">
            <span class="hit-top-left">20</span>
            <span>2分命中</span>
            <span class="hit-top-left">10</span>
          </div>
          <div class="hit-bottom">
            <!-- 甲队命中数据 -->
            <span class="hit-bottom-left"></span>
            <!-- 乙队命中数据 -->
            <span class="hit-bottom-left"></span>
          </div>
        </div>
      </div>
      <!-- 乙队犯规 -->
      <div class="matchResult-left">
        <div class="foul">
          <p>本届犯规</p>
          <p>10</p>
        </div>
        <div class="foul">
          <p>剩余暂停</p>
          <p>1</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { mockData_event } from '@/views/live-detail/footballComponents/eventLegendStatus'
// 对阵表格约束
const columns = [
  {
    title: '比赛对阵',
    dataIndex: 'name',
    key: 'name',
    width: 120
  },
  {
    title: '1',
    dataIndex: 'one',
    key: 'one',
    width: 30,
    render: () => {
      return {
        style: { color: 'red' }
      }
    }
  },
  {
    title: '2',
    dataIndex: 'two',
    key: 'two'
  },
  {
    title: '3',
    dataIndex: 'three',
    key: 'three'
  },
  {
    title: '4',
    dataIndex: 'four',
    key: 'four'
  },
  {
    title: '全场',
    dataIndex: 'tags',
    key: 'tags',
    ellipsis: true,
    width: 60
  }
]

//对阵数据信息
const data = [
  {
    key: '1',
    name: '意大利',
    one: 24,
    two: 24,
    three: 24,
    four: 8,
    tags: 32
  },
  {
    key: '2',
    name: '意大利',
    one: 29,
    two: 29,
    three: 29,
    four: 6,
    tags: 39
  }
]
</script>

<style scoped lang="scss">

.foul-hit {
  padding: 20px 0px;
  display: flex;
  justify-content: space-between;
  .foul {
    text-align: center;
    width: 80px;
    background: #f6f8ff;
    border-radius: 8px;
    padding: 4px;
    font-size: 12px;
    margin: 5px;
  }
  
}

::v-deep .ant-table-tbody > tr > td:last-child {
  color: #f00 !important;
}

::v-deep .ant-table-thead > tr > th:first-child,
::v-deep .ant-table-tbody > tr > td:first-child {
  padding: 16px 16px;
  text-align: left;
}

::v-deep .ant-table-thead > tr > th,
::v-deep .ant-table-tbody > tr > td {
  padding: 16px 0;
  text-align: center;
}

.matchResult {
  padding: 20px 16px;

  .table {
    //#F6F8FF
    :deep(.ant-table-thead th) {
      background-color: #f6f8ff;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #afb8cb;
    }

    :deep(.ant-table-tbody td) {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #525a79;
      background-color: #fff;
    }
  }

  .tab-container {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
  }

  .tab {
    position: relative;
    padding: 5px 20px;
    font-size: 14px;
    cursor: pointer;
    color: rgba(175, 184, 203, 1);
    text-align: center;
  }

  .tab.active {
    color: rgba(22, 177, 58, 1);
    font-weight: bold;
  }

  .underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: rgba(22, 177, 58, 1);
    border-radius: 1px;
  }

  .cruxEvent {
    :deep(.ant-collapse-header) {
      background-color: #ddecff;
      border-radius: 8px;
    }

    :deep(.ant-collapse) {
      border: none;
    }

    :deep(.ant-collapse-content-active) {
      background-color: #f6f8ff;
      border-top: none;
    }

    .flex {
      display: flex;
      justify-content: left;
    }

    .criticalIncidentSlot {
      .item.right {
        justify-content: right;
      }

      .item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .icon {
          align-items: center;

          img {
            width: 16px;
            height: 16px;
          }

          span {
            font-weight: 400;
            font-size: 12px;
            color: #afb8cb;
          }
        }

        .score {
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #525a79;
          margin: 0 34px;
        }

        .center {
          font-weight: 400;
          font-size: 12px;
          color: #afb8cb;
        }
      }
    }

    .statistics {
      width: 408px;
      height: 300px;
      background: #f6f8ff;
      border-radius: 8px 8px 8px 8px;
    }
  }

  .statistics {
    padding: 10px 20px;
    height: 300px;
    background: #f6f8ff;
    border-radius: 8px 8px 8px 8px;

    .border_event {
      height: 1px;
      background: #e2eeff;
      border-radius: 0px 0px 0px 0px;
    }

    .name {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #afb8cb;
    }

    .key {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #525a79;
    }

    .flex {
      display: flex;
      justify-content: space-between;
    }

    .mt-10 {
      margin-top: 10px;
    }

    .title {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #afb8cb;
    }

    .referee {
      .referee-name {
      }
    }

    .penaltyCard {
      display: flex;
      justify-content: space-between;

      div {
        display: flex;

        p {
          display: flex;
          align-items: center;
          margin-right: 16px;

          img {
            width: 14px;
            height: 14px;
            margin-right: 6px;
          }
        }
      }

      p {
        display: flex;
      }
    }
  }
}
</style>
